import React, { Component } from 'react'
import { AnswerApi } from '../../request/api'
import { withRouter } from 'react-router'
import { connect } from 'react-redux'
import { AlertDispatch } from '../../utils'

class Tiankong extends Component {
    state = {
        showAnswer: false,
        answer:""  // 用户的回答选项
    }
    optionClick(key) {
        this.setState({ answer: key })
    }
    submitFn() {
        if (this.state.answer.trim() === "") {
            // 用户没有勾选
            this.props.showAlertFn("请填写答案","error");
        } else {
            // 用户已勾选
            AnswerApi({
                categoryCode: this.props.categoryCode,
                actionType: "exam_test",
                userAnswer: this.state.answer,
                actionCode: this.props.categoryCode,
                // actionCode: this.props.location.state.actionCode
                id:this.props.id
            }).then(res => {
                // console.log(res);
                if (res.errCode === 0) {
                    this.props.showAlertFn("提交成功","success");
                } else {
                    this.props.showAlertFn("提交失败","error");
                }
                
            })
            this.setState({ showAnswer:true })

        }
    }
    changeValue(e) {
        this.setState({ answer: e.target.value })
    }
    render() {
        return (
            <div className="timu" style={{display: this.props.questionType==='fill' ? 'block' : 'none'}}>
                <div className="title">
                    <div className="title_l">填空</div>
                    <div className="title_r">{this.props.title}</div>
                </div>
                <div className="mycontent" dangerouslySetInnerHTML={{ __html: this.props.content || '' }}></div>
                <textarea value={this.state.answer} onChange={this.changeValue.bind(this)} placeholder="请输入答案"></textarea>
                <p className="p">此类型的题目暂不支持打分，按正确记分。</p>
                <div className="submit" onClick={this.submitFn.bind(this)}>提交</div>
                <div className="answer" style={{ display:this.state.showAnswer ? 'block' : 'none'}}>
                    <section className="answer_right">
                        {/* <p><i className="iconfont icon-ceshijieguo-dui"></i>回答正确</p> */}
                        <h2>参考答案：</h2>
                        <div dangerouslySetInnerHTML={{__html: this.props.answer || ""}} className="analysis"></div>
                    </section>
                </div>
            </div>
        )
    }
}

export default connect(null,AlertDispatch)(withRouter(Tiankong))